<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Device Config</title>
    <script src="static/jquery.min.js">
    </script>
    <style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 4px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    margin: 2px 1px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
.device {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
    border-radius: 5%;
}
.device:hover {
    background-color: #4CAF50;
    color: white;
}
.confsection {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
    border-radius: 5%;
    font-size: 16px;
}
.confsection:hover {
    background-color: #4CAF50;
    color: white;
}
.value {
    background-color: white;
    color: black;
    width: 60px;
    height: 10px;
    border: 2px solid #4CAF50;
    border-radius: 5%;
/*    float: right;*/
}
.value:hover {
    background-color: #4CAF50;
    color: white;
}
.short {
    background-color: white;
    color: black;
    width: 6px;
    height: 10px;
    border: 2px solid #4CAF50;
    border-radius: 5%;
}
.short:hover {
    background-color: #4CAF50;
    color: white;
}
.confirm {
    background-color: #4CAF50;
    color: black;
    position: center;
    font-weight: bold;
    font-size: 15px;
    border: 2px solid #4CAF50;
    border-radius: 5%;
}
.confirm:hover {
    background-color: #4CAF50;
    color: white;
}
.addlist {
    background-color: white;
    color: black;
    padding: 2px 6px;
    font-weight: bold;
    border: 2px solid #4CAF50;
    border-radius: 100%;
}
.addlist:hover {
    background-color: #4CAF50;
    color: white;
}
.macinput {
    background-color: white;
    color: black;
    padding: 2px 2px;
    width: 20px;
    font-weight: bold;
    border: 1px solid #4CAF50;
    border-radius: 5%;
}
.macinput:hover {
    background-color: #4CAF50;
    color: white;
}
</style>
<script>
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};

Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};

</script>

 <script language=javascript>

     function getPos(obj)
     {
         obj.focus();
         var workRange=document.selection.createRange();
         obj.select();
         var allRange=document.selection.createRange();
         workRange.setEndPoint("StartToStart",allRange);
         var len=workRange.text.length;
         workRange.collapse(false);
         workRange.select();
         return len;
     }

     function setCursor(obj,num)
     {
         range=obj.createTextRange();
         range.collapse(true);
         range.moveStart('character',num);
         range.select();
     }

     function keyDownEvent(obj)
     {
         code=event.keyCode;
         if(!((code>=48&&code<=57)||(code>=65&&code<=70)||(code>=96&&code<=105)||code==190||code==110||code==13||code==9||code==39||code==8||code==46||code==99||    code==37))
             event.returnValue=false;
         if(code==13)
             event.keyCode=9;
         if(code==110||code==190)
             if(obj.value)
                 event.keyCode=9;
             else
                 event.returnValue=false;
     }

     function keyUpEvent(obj0,obj1,obj2)
     {
         if (obj1.value > 255)
         {
             alert("input range 0 - 255");
	     obj1.value = obj1.value.substring(0, obj1.value.length - 1);
	     return;
         }
         code=event.keyCode

         if(obj1.value.length>=2&&code!=37&&code!=39&&code!=16&&code!=9&&code!=13)
             obj2.focus();

         if(code == 32)
             obj2.focus();

         if(code == 8 && obj1.value.length == 0)
         {
             obj0.focus();
             setCursor(obj0,obj0.value.length);
         }

         if (code == 37 && (getPos(obj1) == 0))
         {
             obj0.focus();
             setCursor(obj0,obj0.value.length);
         }
         if (code == 39 && (getPos(obj1) == obj1.value.length))
         {
             obj2.focus();
         }
     }
     function keyUpEventForMac6(obj0,obj)
     {
         if (obj.value > 255)
         {
             alert("range 0 - 255");
             obj.value = obj.value.substring(0, obj.value.length - 1);
             return;
         }
         if(code == 8 && obj.value.length == 0)
         {
             obj0.focus();
             setCursor(obj0,obj0.value.length);
         }
         if (code == 37 && (getPos(obj) == 0))
         {
             obj0.focus();
             setCursor(obj0,obj0.value.length);
         }

     }

function getmacvalue(obj1,obj2,obj3,obj4,obj5, obj6, obj)
{
         obj.value = obj1.value + ":" + obj2.value + ":" + obj3.value + ":" + obj4.value + ":" +obj5.value + ":" + obj6.value;
         return (obj.value);
}

function octkeyup(obj)
	{
		$(obj).val($(obj).val().replace(/[^0-9-]+/,''));
		if ($(obj).val().length == 1) {
			$(obj).val() == '0' ? $(obj).val('1') : $(obj).val();
		}
	}

	function octkeydown(obj)
	{
		$(obj).val($(obj).val().replace(/[^0-9-]+/,''));
		if($(obj).val().length == 1){
			$(obj).val() == '0' ? $(obj).val('1') : $(obj).val();
		}
	}
 </script>

<script>
$(document).ready(function(){
	console.log("starting");

	$(function () {
		if ($.browser.msie) {
			$('input:checkbox').click(function () {
		            this.blur();
		            this.focus();
			});
		}
	});

	$("#index").on("keyup",function(){
		$(this).val($(this).val().replace(/[^0-9-]+/,''));
		if($(this).val().length == 1){
			$(this).val() == '0' ? $(this).val('1') : $(this).val();
		}
	});

	$("#index").on("keydown",function(){
		$(this).val($(this).val().replace(/[^0-9-]+/,''));
		if($(this).val().length == 1){
			$(this).val() == '0' ? $(this).val('1') : $(this).val();
		}
	});

});

</script>

</head>
<body>
<script>
var index = window.parent.formgetsid();
var enable = 'true';
var typetagged = 'all';

function selectenable()
{
	var radioVal = $('input:radio[name="enable"]:checked').val();
	enable = radioVal;
}

function selectvidtype()
{
	var radioVal = $('input:radio[name="vidtype"]:checked').val();

	if (radioVal == 'priority') {
		typetagged = 'priority';
	} else {
		typetagged = 'tagged';
	}
}

function choosesidtype()
{
	console.log($("#sidtypeselect").val());
	var checkValue = $("#sidtypeselect").val();
}

function ajexrequest(configdic, url)
{
	$.ajax({
		type: "POST",
		url: "/"+url,
		dataType: "json",
		contentType: "application/json; charset=utf-8",
		data: JSON.stringify(configdic),
		success: function(data){
			if (data.status == 'false')
				alert('Feedback ERROR!');

			$('#outputcontent', parent.document).append("<pre>"+"editconfig operation: "+data.status+"</pre>");
			window.parent.showconfig("if:interfaces", data.getconfig);
			window.parent.showconfig("dot1q:bridges", data.getconfig);
			window.parent.showconfig("bridges", data.getconfig);
			window.parent.showconfig("interfaces", data.getconfig);
			$('#outputcontent', parent.document).append("<pre>"+'-------------------------'+window.parent.counter+'-------------------------'+"</pre>");
			window.parent.counter += 1;
		}});
}

function loadsid()
{
	var streamidentify = {};

	streamidentify["sid"] = window.parent.formgetsid();
	streamidentify["enable"] = $('input:radio[name="enable"]:checked').val();

	if (streamidentify["enable"] == 'true') {
		streamidentify["filtertype"] = $("#sidtypeselect").val();
		streamidentify["macaddr"] = $('#mac1').val()+"-"+
				 $('#mac2').val() +"-"+ $('#mac3').val() +"-"+
				 $('#mac4').val() +"-"+ $('#mac5').val() +"-"+
				 $('#mac6').val();
		streamidentify["vlantype"] = $('input:radio[name="vidtype"]:checked').val();
	}
	console.log(streamidentify);
	ajexrequest(streamidentify, "streamidentify");
}

function confirmset()
{
	console.log("yes, confirmset");
	loadsid();
}

</script>

<div>
<form>
<br><br>
<br><div id="sidconf">
	<br>&nbsp;&nbsp;
	<input class="button addlist" type="radio" name="enable" value="true" onclick="selectenable())"  checked="checked">enable
	&nbsp;<input class="button addlist" type="radio" name="enable" value="false" onclick="selectenable()">disable
	<br>&nbsp;&nbsp;*filter type:<select class="button device" id="sidtypeselect" name="sidtypeselect" onchange="choosesidtype()">
		<option value="null" selected>destinate mac</option>
		<option value="source-mac-and-vlan">source mac</option>
	</select>
	<br>&nbsp;&nbsp;*mac address:<br>&nbsp;&nbsp;&nbsp;&nbsp;
	<input name=mac1 id="mac1" class="button macinput" maxlength=2 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(mac1,mac1,mac2)>:
	<input name=mac2 id="mac2" class="button macinput" maxlength=2 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(mac1,mac2,mac3)>:
	<input name=mac3 id="mac3" class="button macinput" maxlength=2 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(mac2,mac3,mac4)>:
	<input name=mac4 id="mac4" class="button macinput" maxlength=2 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(mac3,mac4,mac5)>:
	<input name=mac5 id="mac5" class="button macinput" maxlength=2 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(mac4,mac5,mac6)>:
	<input name=mac6 id="mac6" class="button macinput" maxlength=2 onkeydown=keyDownEvent(this) onkeyup=keyUpEventForMac6(mac5,mac6)>
	<input name =macvalue TYPE="hidden">
	<br>&nbsp;&nbsp;*vlan type:
	<br>&nbsp;&nbsp;
	<input class="button addlist" type="radio" name="vidtype" value="tagged" onclick="selectvidtype()" checked="checked">vid non-zero
	&nbsp;<input class="button addlist" type="radio" name="vidtype" value="priority" onclick="selectvidtype()">vid=0
	&nbsp;<input class="button addlist" type="radio" name="vidtype" value="all" onclick="selectvidtype()">vid ignore
</div>


<!--
<div>
	<INPUT TYPE="button" value = "getvalue" onmouseup=getmacvalue(mac1,mac2,mac3,mac4,mac5,mac6,macvalue)>
</div>
-->
<br>
<b>
<input class="button device confirm" type="button" name="confirm" id="confirm" onclick="confirmset()" value="Yes, confirm">

</form>
</div>
</body>
</html>
